<template>
  <div class="main">
    <section>
      <el-tabs v-model="activeName">
        <el-tab-pane label="基础信息" name="first">
          <el-form label-width="120px" :model="goodsMsg">
            <el-form-item label="商品id:">
              <span>{{goodsMsg.goodsId}}</span>
            </el-form-item>
            <el-form-item label="商品编码:">
              <span>{{goodsMsg.serialNo}}</span>
            </el-form-item>
            <el-form-item label="ERP商品名称:">
              <span>{{goodsMsg.erpGoodsName}}</span>
            </el-form-item>
            <el-form-item label="ERP商品分类:">
              <span>{{goodsMsg.backCatName}}</span>
            </el-form-item>
            <el-form-item label="经营模式:">
              <span>{{goodsMsg.businessModel === 1? '自营' :'招商'}}</span>
            </el-form-item>
            <el-form-item label="供应商:">
              <el-select disabled v-model="goodsMsg.merchantId" placeholder="请选择">
                <el-option v-for="it in merchants" :key="it.ckdm" :label="it.merchantName" :value="it.ckdm"></el-option>
              </el-select>
            </el-form-item>
          </el-form>
        </el-tab-pane>
        <el-tab-pane label="商品属性" name="second">
          <el-table :data="goodsMsg.goodsSkuBaseList" border >
            <el-table-column prop="id" label="序号" >
            </el-table-column>
            <el-table-column prop="skuId" label="SKU码" >
            </el-table-column>
            <el-table-column prop="erpColorId" label="颜色代码" >
            </el-table-column>
            <el-table-column prop="erpColorValue" label="颜色" >
            </el-table-column>
            <el-table-column prop="serialNo" label="规格代码" >
            </el-table-column>
            <el-table-column prop="erpSizeValue" label="规格" >
            </el-table-column>
            <el-table-column prop="weight" label="重量" >
            </el-table-column>
            <el-table-column prop="remainStock" label="库存" >
            </el-table-column>
          </el-table>
        </el-tab-pane>
      </el-tabs>
    </section>
  </div>
</template>

<script>
import { getE3goodsDetail } from '@/api/goodMiddleStage'
import { getMerchantWarehouse } from '@/api/common'
export default {
  data() {
    return {
      activeName: 'first',
      goodsMsg: {},
      merchants: [] // 供应商列表
    }
  },
  created() {
    this.init()
  },
  methods: {
    init() {
      this.getMerchantWarehouseList()
      this.getData()
    },
    async getData() {
      try {
        const { data } = await getE3goodsDetail({
          goodsId: this.$route.query.goodsId
        })
        this.goodsMsg = data
      } catch (error) {
        console.log(error)
      }
    },
    // 获取供应商、仓库列表
    async getMerchantWarehouseList() {
      const { data } = await getMerchantWarehouse()
      this.merchants = data.viewList.filter(item => item.supplyCode !== null)
    }
  }
}
</script>

<style>
</style>
